import React, { Component } from 'react';

import './index.scss';


import { COURSE_TH } from 'config/table_config';
import CourseService from 'services/Course';
import CommonService from 'services/CommonService';

import ListTitleCon from 'components/commonCon/ListTitleCon';
import TableHeadCon from 'components/commonCon/TableHeadCon';
import TableBodyCon from './TableBodyCon';

import { checkAndGetDatas, comfirmText } from 'utils/tools'

const courseService = new CourseService(),
      commonService = new CommonService(),
      cfmText = comfirmText ('COURSE');


class CourseCon extends Component {
  constructor(props) {
    super(props);

    this.state = {
      courseData: [],
      fieldData: [],
      title: '课程管理'
    }
  }

  componentDidMount() {
    this.getCourseData();
  }

  async onRefreshData() {
    this.getCourseData();
  }

  /*获取课程数据*/
  async getCourseData() {
    const res = await courseService.getCourseData();
    const data = await checkAndGetDatas(this, res); //传入this如res进行判断操作
    //前端数据格式化
    const { fieldData, courseData } = data;

    const newCourseData = courseData.map((cItem, index) => {
      if (cItem.field === 0) {
        cItem.fieldTitle = '无分类';
      }

      fieldData.forEach((fItem, index) => {
        if (fItem.id === cItem.field) {
          cItem.fieldTitle = fItem.title;
        }
      })
      return cItem;
    })

    this.setState({
      courseData: newCourseData,
      fieldData
    })
  }

  /* 修改分类*/
  async onSelectChange(data, index, cid) {
    //data用来修改数据 index用来确定是哪一项
    const { courseData } = this.state;
    const fieldId = data.id;
    courseData[index].field = fieldId;  //这里设置的是data.id
    courseData[index].fieldTitle = data.title;
    this.setState({
      courseData
    })

    const res = await courseService.changeCourseField({ 
      cid, 
      field: fieldId 
    });
    const errorCode = res.error_code;
    if(errorCode !== 0) {
      alert('修改课程分类失败!')
      return;
    }
    
  }

  /* 修改课程上下架*/
  async onStatusClick (cid, index) {
    const { courseData } = this.state,
          status = courseData[index].status,
          text = cfmText (status);

    const cfm = window.confirm(text);
    
    if(!cfm) {
      return; //取消就返回
    }
    
    switch(status) {
      case 0:
        courseData[index].status = 1;
        break;
      case 1:
        courseData[index].status = 0;
        break;
      default:
        break;
    }

    this.setState({
      courseData
    }, async ()=> {
      const result = await commonService.changeDataStatus({
        id: cid, 
        field: 'COURSE',
        status: this.state.courseData[index].status
      })
      const errorCode = +result.error_code;
      if(errorCode !== 0) {
        alert(
          status === 0 ? '上架课程失败!' : '下架该失败！'
        )
      }
    })
  }

  render() {
    const { title, courseData, fieldData } = this.state; //良好习惯，一定要解构
    // const { onRefreshData } = this;
    return (
      <div className="list-container">
        {/* 公共组件 */}
        <ListTitleCon title={title} onRefreshData={this.onRefreshData.bind(this)} />
        <table className="list-table">
          <TableHeadCon thData={COURSE_TH} />
          <TableBodyCon
            courseData={courseData}
            fieldData={fieldData}
            onSelectChange={this.onSelectChange.bind(this)}
            onStatusClick = { this.onStatusClick.bind(this)} 
          />
        </table>
      </div>
    )
  }
}

export default CourseCon;